<style lang="scss">
  .delay-container {
    .el-table {
      height: calc(100vh - 260px)!important;
      margin-bottom: 14px;
    }
    .paste-btn-div {
      margin-top: 5px;
      text-align: center;
    }
    .gdxx-div {
      outline: 1px dotted #cccccc;
      padding-top: 7px;
      margin-top: 7px;
    }
  }
</style>

<template>
  <!-- 工单维护-已下发 -->
  <el-container class="delay-container">
    <!-- 顶栏容器 -->
    <el-header>
      <!-- 查询框 -->
      <div class="search-box">
        <div class="conditions-box">
          <div class="conditions-item">工单编号:
            <el-input v-model="pageParam.condition.code" size="small"
              :clearable="true" placeholder="请输入工单编号" style="width: 160px;"></el-input>
          </div>
          <div class="conditions-item">工单内容:
            <el-input
              v-model="pageParam.condition.content"
              size="small"
              :clearable="true"
              placeholder="请输入内容关键字"
              style="width: 160px;"
            ></el-input>
          </div>
          <div class="conditions-item">工单来源:
            <el-select
              v-model="pageParam.condition.sourceId"
              size="small"
              :clearable="true"
              placeholder="请选择工单来源"
              @change="doSearch"
              style="width: 160px;"
            >
              <el-option
                v-for="item in sourceList"
                :key="item.lyid"
                :label="item.lymc"
                :value="item.lyid"
              ></el-option>
            </el-select>
          </div>
          <div class="conditions-item">执行处室:
            <el-select
              v-model="pageParam.condition.deptId"
              size="small"
              :clearable="true"
              placeholder="请选择执行处室"
              @change="doSearch"
              style="width: 160px;"
            >
              <el-option
                v-for="item in deptList"
                :key="item.bmid"
                :label="item.bmjc"
                :value="item.bmid"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="search-btn">
          <el-button size="small" icon="el-icon-search" plain
            @click="doSearch" :loading="loadingTable">查询</el-button>
          <el-button type="primary" size="small" icon="el-icon-circle-check-outline" plain
            @click="doPassBatch">批量通过</el-button>
          <el-button type="info" size="small" icon="el-icon-circle-close-outline" plain
            @click="doUnPassBatch">批量拒绝</el-button>
        </div>
      </div>
    </el-header>
    <!-- 主要区域容器 -->
    <el-main>
      <el-table :data="tableItem.list" stripe border :height="tableHeight" v-loading="loadingTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column prop="code" label="工单编号" align="left" show-overflow-tooltip width="260"></el-table-column>
        <el-table-column prop="sourceName" label="来源系统" align="center"></el-table-column>
        <el-table-column prop="cateName" label="工单类别" align="center"></el-table-column>
        <el-table-column prop="deptName" label="执行处室" align="center"></el-table-column>
        <el-table-column prop="repeated" label="重复" align="center">
          <template slot-scope="scope">
            <i v-if="scope.row.repeated=== 1" class="el-icon-refresh" style="color: red; font-size: 16px;"></i>
            <i v-else class="el-icon-refresh" style="color: grey; font-size: 16px;"></i>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="important" label="重要" align="center" width="80">
          <template slot-scope="scope">
            <i v-if="scope.row.important=== 1" class="el-icon-star-off" style="color: red; font-size: 16px;"></i>
            <i v-else class="el-icon-star-off" style="color: grey; font-size: 16px;"></i>
          </template>
        </el-table-column>
        <el-table-column prop="unsatisfy" label="不满意" align="center" width="80">
          <template slot-scope="scope">
            <i v-if="scope.row.unsatisfy=== 1" class="el-icon-bell" style="color: red; font-size: 16px;"></i>
            <i v-else class="el-icon-bell" style="color: grey; font-size: 16px;"></i>
          </template>
        </el-table-column> -->
        <el-table-column prop="limitTime" label="处理时限" align="center" :formatter="formatLimitDate"></el-table-column>
        <el-table-column prop="redlyTime" label="延期时限" align="center" :formatter="formatDelayDate"></el-table-column>
        <el-table-column prop="dqzt" label="当前状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.dqzt=== 2">已下发</span>
            <span v-else-if="scope.row.dqzt=== 3">已分发</span>
            <span v-else-if="scope.row.dqzt=== 4">已办理</span>
            <span v-else-if="scope.row.dqzt=== 5">已退回</span>
            <span v-else-if="scope.row.dqzt=== 6">已结束</span>
          </template>
        </el-table-column>
        <el-table-column prop="operations" label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              v-for="(item, index) in scope.row.operationsModelList"
              :key="index" :type="item.type" plain size="mini" :icon="item.icon"
              v-bind:class="'operations-'+item.handleMethod"
              @click="operationClick(item.handleMethod, scope.row)"
            >{{item.label}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableItem.pageNum"
        :page-size="tableItem.pageSize"
        :page-sizes="[20, 30, 50, 100]"
        :total="tableItem.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="float: right;"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: 'service-delay',
    data () {
      return {
        // 来源列表
        sourceList: [],
        // 处室列表
        deptList: [],
        // 查询参数
        pageParam: {
          pageNum: 1,
          pageSize: 20,
          condition: {
            deptId: '',
            sourceId: '',
            code: '',
            content: ''
          }
        },
        loadingTable: false,
        // 表格高度
        tableHeight: -1,
        // 表格列表
        tableItem: {},
        // 选中list
        multipleSelection: [],
        // 延期工单
        delayPojo: {
          keyList: [],
          isPass: '1'
        }
      }
    },
    methods: {
      // 页面处室话方法
      initFn () {
        this.getSourceList()
        this.getDeptList()
        this.doSearch()
      },
      // 获取来源列表
      getSourceList () {
        this.$axios.post(this.$api.source.selector).then(rs => {
          if (rs) {
            this.sourceList = rs
          }
        })
      },
      // 获取责任处室
      getDeptList () {
        this.$axios.post(this.$api.dept.selector).then(rs => {
          if (rs) {
            this.deptList = rs
          }
        })
      },
      // 查询方法
      doSearch () {
        this.loadingTable = true
        this.getDelayPage()
      },
      // 获取超期件分页列表
      getDelayPage () {
        this.$axios.post(this.$api.service.delayPage, this.pageParam).then(rs => {
          if (rs) {
            this.tableItem = rs
            this.loadingTable = false
          }
        })
      },
      // 分页
      handleSizeChange: function (size) {
        this.loadingTable = true
        this.pageParam.pageSize = size
        this.getDelayPage()
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.loadingTable = true
        this.pageParam.pageNum = currentPage
        this.getDelayPage()
      },
      // 日期格式化
      formatLimitDate: function (row, column) {
        const _this = this
        var date = row.limitTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日')
      },
      formatDelayDate: function (row, column) {
        const _this = this
        var date = row.redlyTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日')
      },
      // 操作点击事件
      operationClick (method, row) {
        switch (method) {
          case 'pass':
            this.passFn(row)
            break
          case 'bind':
            this.unPassFn(row)
            break
        }
      },
      // 选中
      handleSelectionChange (val) {
        this.multipleSelection = val
      },
      // 通过
      passFn: function (item) {
        const _this = this
        _this.$confirm('通过后将延长工单处理时限，是否继续?', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
          .then(() => {
            _this.loadingTable = true
            _this.delayPojo.keyList.push(item.wllzid)
            _this.delayPojo.isPass = '1'
            _this.$axios.post(_this.$api.service.pass, _this.delayPojo).then(function (rs) {
              if (rs) {
                _this.$message({ message: '成功通过延期申请...', showClose: true, type: 'success' })
                _this.getDelayPage()
              } else {
                _this.loadingTable = false
                _this.delayPojo.keyList = []
              }
            })
          })
          .catch(() => {
            return false
          })
      },
      unPassFn: function (item) {
        const _this = this
        _this.$confirm('拒绝别人真的好吗?', '提示', {
            cancelButtonText: '我再想想',
            confirmButtonText: '残忍拒绝',
            type: 'warning'
          })
          .then(() => {
            _this.loadingTable = true
            _this.delayPojo.keyList.push(item.wllzid)
            _this.delayPojo.isPass = '0'
            _this.$axios.post(_this.$api.service.pass, _this.delayPojo).then(function (rs) {
              if (rs) {
                _this.$message({ message: '成功拒绝延期申请...', showClose: true, type: 'success' })
                _this.getDelayPage()
              } else {
                _this.loadingTable = false
                _this.delayPojo.keyList = []
              }
            })
          })
          .catch(() => {
            return false
          })
      },
      // 批量操作
      doPassBatch: function () {
        const _this = this
        if (_this.multipleSelection.length === 0) {
          _this.$message({ message: '亲！先选择要通过的工单哦...', showClose: true, type: 'warning' })
          return
        }
        // console.log(_this.multipleSelection);
        let wllzidList = _this.multipleSelection.map((item, index1) => {
          return item.wllzid
        })
        _this.delayPojo.keyList = wllzidList
        _this.delayPojo.isPass = '1'
        // console.log(wllzidList)
        _this.$confirm('通过后将延长工单处理时限?', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
          .then(() => {
            _this.loadingTable = true
            _this.$axios.post(_this.$api.service.pass, _this.delayPojo).then(function (rs) {
              if (rs) {
                _this.$message({ message: '成功延期工单...', showClose: true, type: 'success' })
                _this.getDelayPage()
              } else {
                _this.loadingTable = false
                _this.delayPojo.keyList = []
              }
            })
          })
          .catch(() => {
            return false
          })
      },
      doUnPassBatch: function () {
        const _this = this
        if (_this.multipleSelection.length === 0) {
          _this.$message({ message: '亲！先选择要拒绝的工单哦...', showClose: true, type: 'warning' })
          return
        }
        // console.log(_this.multipleSelection);
        let wllzidList = _this.multipleSelection.map((item, index1) => {
          return item.wllzid
        })
        _this.delayPojo.keyList = wllzidList
        _this.delayPojo.isPass = '0'
        // console.log(wllzidList)
        _this.$confirm('拒绝别人真的好吗?', '提示', {
            cancelButtonText: '我再想想',
            confirmButtonText: '残忍拒绝',
            type: 'warning'
          })
          .then(() => {
            _this.loadingTable = true
            _this.$axios.post(_this.$api.service.pass, _this.delayPojo).then(function (rs) {
              if (rs) {
                _this.$message({ message: '成功拒绝延期申请...', showClose: true, type: 'success' })
                _this.getDelayPage()
              } else {
                _this.loadingTable = false
                _this.delayPojo.keyList = []
              }
            })
          })
          .catch(() => {
            return false
          })
      }
    },
    created: function () {

    }
  }
</script>
